<template>
	<div style="height: 100%;width:1700px;color: black">
		<a-layout style="width:1700px;height: 100%;">
			<a-layout-sider
					style="flex: 0 0 415px;min-width: 415px;max-width: 415px;width: 415px;background: #ffffff !important;overflow-y:scroll">
				<div class="left-top">
					<div class="logoa1">
						<img src="../../assets/images/generalDetection/detection.png"/>
					</div>
					<span>通用监测</span>
					<div style="padding-left: 8%;width: 35%;display: flex;">
						<div style="width: 40%;color: whitesmoke;">总数:</div>
						<div :title="listCount"
						     style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 60%;color: whitesmoke;">
							{{ listCount }}
						</div>
					</div>
					<div class="logoa2">
						<div class="logoa2Img" @click="changePageAdd"></div>
						<span style="color: white;font-size: 14px;cursor: pointer;" @click="changePageAdd">添加规则</span>
					</div>
				</div>
				<div class="left-item" v-for="(item,i) in left_list" :key="i">
					<div style="width: 80%;"
					     :style="active_index==item.id?'background-color: #bae7ff;border-radius: 2px 0px 0px 2px':''">
						<span style="padding-left: 5px;" :style="active_index==item.id?'color: rgb(23,119,255);':''"
						      :title="item.ruleName"
						      @click="changePage(item.id,item.ruleName,item.commandId)">{{
								item.ruleName ? item.ruleName.substring(0, 20) : ''
							}}</span>
					</div>

					<div style="display: flex;width: 19%;height: 52.5%;justify-content: space-around;"
					     :style="active_index==item.id?'background-color: #bae7ff;border-radius: 0px 2px 2px 0px':'display: none'"
					>
						<div class="search" style="margin-left: 20%;" title="查看规则详情"
						     @click="changePageRuleInfo(item.id)"></div>
						<div class="delete" title="删除" @click="deleteButton(item)"></div>
						<div :style="collspanQuery?'display:none':''" class="start" title="开始" @click="showflag"></div>
					</div>
				</div>
			</a-layout-sider>
			<a-layout-content
					style="flex: 0 0 1270px;min-width: 1270px;max-width: 1270px;width: 1270px;position: relative;left: 15px;background: #ffffff !important;">
				<Yys v-if="yys&&flat" v-bind:commandId="commandId" v-bind:ruleName="ruleName" v-bind:commandId2="commandId2"
				     v-bind:rulename2="rulename2"></Yys>
				<Info v-bind:parent="info_parent" v-bind:rule="rule_id" v-if="if_info" @gohome="gohome"></Info>
				<Addrule v-bind:parent="add_parent" v-bind:commandId="commandId" v-bind:ruleName="ruleName" v-if="addrule"
				         @gohome_add="gohome_add"></Addrule>
			</a-layout-content>
		</a-layout>
	</div>
</template>

<script>

import left from './left/index'
import rightTop from './right/top'
import '@/utils/wordCloud'
import echarts from "echarts";
import {remove, ruleNameCount, ruleNameList} from "@/api/generalDetection/generalDetetion.js";
import yys from '@/views/generalDetection/generalDetection_1.vue'
import info from '@/views/generalDetection/generalRulesInfo.vue'
import addrule from '@/views/generalDetection/generalDetectionAdd_new.vue'

const CubeLeft = echarts.graphic.extendShape({
	shape: {
		x: 0,
		y: 0
	},
	buildPath: function (ctx, shape) {
		const xAxisPoint = shape.xAxisPoint
		const c0 = [shape.x, shape.y]
		const c1 = [shape.x - 9, shape.y - 9]
		const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 9]
		const c3 = [xAxisPoint[0], xAxisPoint[1]]
		ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
	}
})
const CubeRight = echarts.graphic.extendShape({
	shape: {
		x: 0,
		y: 0
	},
	buildPath: function (ctx, shape) {
		const xAxisPoint = shape.xAxisPoint
		const c1 = [shape.x, shape.y]
		const c2 = [xAxisPoint[0], xAxisPoint[1]]
		const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9]
		const c4 = [shape.x + 18, shape.y - 9]
		ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
	}
})
const CubeTop = echarts.graphic.extendShape({
	shape: {
		x: 0,
		y: 0
	},
	buildPath: function (ctx, shape) {
		const c1 = [shape.x, shape.y]
		const c2 = [shape.x + 18, shape.y - 9]
		const c3 = [shape.x + 9, shape.y - 18]
		const c4 = [shape.x - 9, shape.y - 9]
		ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
	}
})
echarts.graphic.registerShape('CubeLeft', CubeLeft)
echarts.graphic.registerShape('CubeRight', CubeRight)
echarts.graphic.registerShape('CubeTop', CubeTop)
const MAX = [6000, 6000, 6000, 6000, 6000, 5000, 4000, 3000, 2000, 4000, 3000, 2000]
const VALUE = [2012, 1230, 3790, 2349, 1654, 1230, 3790, 2349, 1654, 3790, 2349, 1654]


export default {
	name: "generalDetection",
	components: {
		left,
		rightTop,
		Yys: yys,
		Info: info,
		Addrule: addrule
	},
	data() {
		return {
			add_parent: this,
			info_parent: this,
			ruleName: undefined,
			commandId2: undefined,
			commandId: undefined,
			rulename2: undefined,
			active_index: 1,
			yys: true,
			if_info: false,
			addrule: false,
			rule_id: null,
			left_list: [],
			listCount: undefined,
			collspanQuery: true,
			xazx_c: true,
			jt_c: true,
			sgs_c: true,
			zygs_c: true,
			qt_c: true,
			lableList: [],
			labelsData: [],
			media_type: [],
			media_type2: [],
			emo_polarity: [],
			check_flag: false,
			flat: 1,
			user: (JSON.parse(localStorage.getItem('user')) ? JSON.parse(localStorage.getItem('user')) : {
				'realName': "***"
			}), // 当前用户信息
			labelCol1: {span: 4},
			wrapperCol1: {span: 18},
			change: 1,
			listData: [],
			color: "#8674FF",
			changebuttonSelectStyle: '全部',
			middle_value: '全部',
			labelCol: {span: 10},
			wrapperCol: {span: 14},
			form: {
				title: '',
				domain: '通用事件',
				classification: '全部',
				mediaType: 1,
				sampletype: '',
			},
			orderBy: false,
			mediaFlag: 1,
			mediaStyle: 'primary',
			collspanMedia: true,
			indeterminate: false,
			checkAll: false,
			total: 0,
			label: '',
			labels: '',
			detailsIf: 0,
			myChartBottomLine: undefined,
			myChartMediaBar: undefined,
			myChartScatter: undefined,
			myChartPie: undefined,
			dataLevelLine1: [12, 80, 79, 27, 99, 43, 33],
			dataLevelLine2: [11, 76, 94, 23, 29, 77, 53],
			dataLevelLine3: [67, 62, 65, 35, 44, 69, 52],
			dataLevelDate: [],


		}
	},
	methods: {
		gohome(val, val2, val3) {
			this.commandId2 = val2
			this.rulename2 = val3
			this.if_info = val
			this.yys = true
			this.addrule = false
		},
		gohome_add(val, val2, val3) {
			this.commandId2 = val2
			this.rulename2 = val3
			this.addrule = val
			this.yys = true
			this.if_info = false
		},
		deleteButton(item) {
			let id = [];
			id.push(item.id);
			confirm('确定删除该记录吗？', () => {
				remove(id).then(res => {
					this.$message.success("删除成功");
					ruleNameList({}).then(res => {
						this.left_list = res.data;
						if (this.left_list.length <= 0) {
							this.$message.success("请添加规则信息");
						}
						this.if_info = false;
						this.addrule = false;
						this.yys = true;
						this.commandId = this.left_list[0].commandId
						this.ruleName = this.left_list[0].ruleName
					})
				})
			});
		},
		showflag() {
			this.collspanQuery = !this.collspanQuery;
			localStorage.setItem('collspanQuery', this.collspanQuery);
		},
		changePage(id, rule_name, commandId) {
			this.active_index = id
			this.commandId2 = commandId;
			this.commandId = commandId;
			this.ruleName = rule_name;
			this.rulename2 = rule_name;
			this.yys = true;
			this.flat++;
			this.if_info = false
			this.addrule = false
		},
		changePageAdd() {
			this.yys = false;
			this.if_info = false;
			this.addrule = true;
		},
		changePageRuleInfo(id) {
			this.yys = false;
			this.if_info = true;
			this.rule_id = id;
			this.addrule = false;
		},

		showOtherMedia() {
			this.collspanMedia = !this.collspanMedia;
		},
		showQuery() {
			this.collspanQuery = !this.collspanQuery;
		},
		callback(tag) {
			if (tag == 1) {
				this.change = 1;
			}
			if (tag == 2) {
				this.change = 2;


			}
		},
		init() {
			ruleNameList({}).then(res => {
				this.left_list = res.data;
				if (this.left_list.length <= 0) {
					this.$message.success("请添加规则信息");
				}
				this.commandId = this.left_list[0].commandId
				this.ruleName = this.left_list[0].ruleName
				this.active_index = this.left_list[0].id
			})

			//获取规则总数
			ruleNameCount({}).then(res => {
				this.listCount = res.data;
			})
		}
	},
	mounted() {
		if (localStorage.getItem('collspanQuery') == 'true') {
			this.collspanQuery = true
		} else if (localStorage.getItem('collspanQuery') == 'false') {
			this.collspanQuery = false
		}
	},

	created() {
		this.init();
	},


}
</script>

<style scoped lang="scss">
.left-top {
	height: 60px;
	font-size: 16px;
	display: flex;
	align-items: center;
	background-color: rgb(23, 119, 255);
	width: 100%;

	.logoa1 {
		margin: 0 25px 0 25px;
	}

	.logoa2Img {
		width: 20%;
		height: 20%;
		background: url("../../assets/images/generalDetection/addChart.png") left center no-repeat;
		display: inline-block;
		/*margin-left: 25%;*/
		cursor: pointer;
	}

	.logoa2 {
		height: 100%;
		width: 25%;
		margin-left: 5%;
	}

	span {
		line-height: 60px;
		color: #ffffff;
	}
}

.left-item {
	height: 40px;
	font-size: 14px;
	display: flex;
	margin-left: 45px;
	align-items: center;

	span {
		cursor: pointer;
	}

	.suspended {
		background: url("../../assets/images/generalDetection/suspended.png") left center no-repeat;
		width: 20%;
		height: 100%;
		cursor: pointer;
	}

	.delete {
		background: url("../../assets/images/generalDetection/delete.png") left center no-repeat;
		width: 20%;
		height: 100%;
		cursor: pointer;
	}

	.search {
		background: url("../../assets/images/generalDetection/1.png") left center no-repeat;
		width: 20%;
		height: 100%;
		cursor: pointer;
	}

	.start {
		background: url("../../assets/images/generalDetection/26.png") left center no-repeat;
		width: 20%;
		height: 100%;
		cursor: pointer;
	}
}

/deep/ .ant-checkbox-wrapper + .ant-checkbox-wrapper {
	margin-left: 0px
}

/deep/ .zhapian_check.ant-checkbox-group {
	line-height: 2.5
}

/deep/ .checkboxs .ant-checkbox-group {
	line-height: 2.5
}

/deep/ .checkboxs .ant-checkbox-group {
	line-height: 2.5
}

/deep/ .eventtype.ant-select {
	margin-left: 20px !important;
	width: 150px

}

/deep/ .eventtype1.ant-select {
	margin-left: -30px !important;
	width: 150px

}

/deep/ .eventtype2.ant-select {
	margin-left: -20px !important;
	width: 150px

}

/deep/ .eventtype3.ant-select {
	margin-left: 20px !important;
	width: 150px

}

/deep/ .eventtype4 .ant-select {
	margin-left: 20px !important;
	width: 150px

}

/deep/ .eventtype5 ant-form-item-control {
	//margin-left:20px!important;
	width: 100px

}

.add /deep/ .ant-form-item-control {
	margin-left: 77px;
	margin-top: -31px;
	width: 143px;
}

.add2 /deep/ .ant-form-item-control {
	margin-left: 77px;
	margin-top: -31px;
	width: 173px;
}

.overflow {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.modal-box /deep/ .ant-modal-body {
	min-height: 194px;
}

.modal-box /deep/ .ant-modal-content {
	height: 300px;
}

.modal-box2 /deep/ .ant-modal-body {
	min-height: 215px
}

.modal-box2 /deep/ .ant-modal-footer {
	min-height: 60px
}

.right-content {
	margin-bottom: 40px;

	.ant-row {
		height: 50px;
		line-height: 50px;

		.content-left {
			text-align: right;
			font-size: 14px;
			height: 100%;
		}

		.content-right {
			float: right;
			height: 100%;
			position: relative;
			left: -30px;

			.ant-input {
				width: 480px;
				height: 40px;
				border-radius: 3px;
			}
		}
	}
}

/deep/ .ant-tabs-bar {
	border-bottom: 0px solid #e8e8e8 !important;
}

/deep/ .ant-tabs-tab {
	font-size: 15px !important;
}

.listv2-root {
	width: 100%;
	height: 100%;
	position: relative;
}

/deep/ .ant-list-item-meta-avatar {
	margin-right: 0px;
}

/deep/ .buttona1 > div {
	color: black;
	font-size: 13px;
	cursor: pointer;
}

.changebuttonStyle {
	background: #1577FF;
	padding: 0 10px;
	height: 25px;
	color: #fff;
	border-radius: 5px;
	line-height: 25px;
	cursor: pointer;
}

.divtext {
	/*border: solid #F0F0F0 1px;*/
	/*text-align: center;*/
	/*padding-left: 1%;*/
	/*padding-right: 1%;*/
	/*margin-right: 1%;*/
	margin: 0 4.5px;
	color: black;
}

.titleDiv {
	height: 40px;
	margin-top: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center
}

.titleFontDiv {
	font-size: 14px;
	font-weight: bold;
	margin-left: 30px;
	display: flex
}

.fontBottomLine {
	border-bottom: 2px solid #1678FF;
	height: 25px
}

.backButton {
	height: 40px;
	width: 80px;
	align-items: center;
	line-height: 40px;
	border: 1px solid #E6E6E6;
	text-align: center;
	margin-right: 50px;
	border-radius: 10px;
	cursor: pointer;
}

@media screen and (max-device-width: 2560px) {
	#lineChart {
		width: 1213px;
	}
	#lineChart2 {
		width: 1213px;
	}
	#pieChart {
		width: 595px;
	}
}

@media screen and (max-device-width: 1920px) {
	#lineChart {
		width: 1213px;
	}
	#lineChart2 {
		width: 1213px;
	}
	#pieChart {
		width: 595px;
	}
}

.scatterLabel {
	height: 30px;
	line-height: 30px;
	padding: 0 10px;
	cursor: pointer;
}

.scatterLabelActive {
	background-color: #1777FF;
	border-radius: 6px;
	color: white;
}

.ant-list-pagination {
	position: absolute;
	left: 35%;
}

.ant-btn-primary {
	color: #ffffff;
}

.tableTr {
	border: 1px solid #F5F8FF;
	height: 35px;
	width: 100%;
	background-color: white;
	display: flex;
	align-items: center;
	color: #A0A4AA;
}

.tableTd20 {
	width: 20%;
	text-align: center
}

.tableTd30 {
	width: 30%;
	text-align: center
}

.tableTd50 {
	width: 50%;
	text-align: center;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-around;
}
</style>
